import React from 'react';
import './style.less';
import { isArray } from 'lodash';

const computedCi = r => 2 * Math.PI * r;
const computedPro = (data, r) => (data / 100) * computedCi(r);

const computedVal = (i, length) => {
    if (i == 0) {
        return 0;
    } else if (i == length - 1) {
        return 100;
    } else {
        return (100 / (length - 1)) * i;
    }
};

// interface ProgressProps<T>{
//     /**
//      * @param object <r: 半径，width: 圈厚度， size: 圈大小， value: 进度值， color 颜色>
//      *
//      * @description 单圈传入一个对象，多圈传入已个数组
//      */
//     data: Array<T>
//     centerTextClass: string
//     centerText: React.ReactElement<any>
// }

class ArcProgress extends React.Component {
    static defaultProps = {
        data: [
            {
                width: 65,
                r: 160,
                color: ['#3AB078', '#000'],
                value: 100
            }
        ]
    };

    render() {
        const { data, centerTextClass, children } = this.props;

        const colors = data.map(item => {
            return item.color;
        });

        const scale = 2.5;

        const mapR = data.map(item => {
            return item.r * scale;
        });
        const maxR = Math.max.apply(null, mapR);

        const hashId = Math.floor(Math.random() * 1000);

        return (
            <div className="annular">
                <div className="outer">
                    <svg
                        width={maxR / scale}
                        height={maxR / scale}
                        viewBox={`0 0 ${maxR * scale} ${maxR * scale}`}
                    >
                        <defs>
                            {colors.map((item, i) => (
                                <linearGradient
                                    key={i}
                                    x1="1"
                                    y1="0"
                                    x2="0"
                                    y2="0"
                                    id={hashId + i}
                                >
                                    {isArray(item) ? (
                                        item.map((it, i) => (
                                            <stop
                                                key={`${i}stop`}
                                                offset={`${computedVal(
                                                    i,
                                                    item.length
                                                )}%`}
                                                stopColor={it}
                                            />
                                        ))
                                    ) : (
                                        <stop offset="100%" stopColor={item} />
                                    )}
                                </linearGradient>
                            ))}
                        </defs>
                        {data.map((item, i) => (
                            <g
                                key={i}
                                transform={`matrix(0,-1,1,0,0,${maxR * scale})`}
                            >
                                <circle
                                    cx={maxR * 1.2}
                                    cy={maxR * 1.2}
                                    r={item.r * scale}
                                    className="grad-cir"
                                    strokeWidth={item.width}
                                    stroke={`url(#${hashId + i})`}
                                    fill="none"
                                    strokeDasharray={`${computedPro(
                                        item.value,
                                        item.r * scale
                                    )}
                                            ${computedCi(item.r * scale)}`}
                                />
                            </g>
                        ))}
                    </svg>
                    <div className={'num ' + centerTextClass}>{children}</div>
                </div>
            </div>
        );
    }
}

export default ArcProgress;
